#@adminLayout() #define main()
<script src="#(ctx)/static/antvx6/js/x6.js" type="text/javascript"></script>
<script src="#(ctx)/static/antvx6/js/x6-node.js" type="text/javascript"></script>
<body>

<div class="ui-layout-center">
    <div id="graph-container" style="width: 100%;height: 100%"></div>
</div>


<script>
	var wf_id="#(wf_id)";
	var task_id="#(task_id)";
	var prefix ="#(ctx)/jwflow";

	$(function () {
		loadJson();
	});
	// #region 初始化画布
	const graph = new X6.Graph({
		container: document.getElementById('graph-container'),
		width: 1800,
		height: 1000,
		grid: true,
		mousewheel: {       //按住 ctrl键鼠标滚轮控制放大缩小
			enabled: true,
			zoomAtMousePosition: true,
			modifiers: 'ctrl',
			minScale: 0.5,
			maxScale: 3,
		},
		connecting: {
			snap: true,
			allowBlank: false,
			allowLoop: false,
			highlight: true,
			router: {
				name: 'manhattan',       //连接线根据位置自动换节点
				args: {
					padding: 1,
				},
			},
			connector: {
				name: 'rounded',
				args: {
					radius: 8,
				},
			},
			anchor: 'center',
			connectionPoint: 'anchor',
			allowBlank: false,
			snap: {
				radius: 20,
			},
			createEdge() {
				return new X6.Shape.Edge({
					attrs: {
						line: {
							stroke: '#A2B1C3',
							strokeWidth: 2,
							targetMarker: {
								name: 'block',
								width: 12,
								height: 8,
							},
						},
					},
					zIndex: 0,
				})
			},
			validateConnection({targetMagnet}) {
				return !!targetMagnet
			},
		},
		highlighting: {
			magnetAdsorbed: {
				name: 'stroke',
				args: {
					attrs: {
						fill: '#5F95FF',
						stroke: '#5F95FF',
					},
				},
			},
		},
		resizing: true,
		rotating: false,
		selecting: {
			enabled: true,
			rubberband: true,
			showNodeSelectionBox: true,
		},
		snapline: true,
		keyboard: true,
		clipboard: true,
		history: {
			enabled: true,
			ignoreAdd: true,
			ignoreRemove: true,
			ignoreChange: false,
		},
	})
	// #endregion

	//双击修改内容
	graph.on('cell:dblclick', ({cell, e}) => {
		const isNode = cell.isNode()
		const name = cell.isNode() ? 'node-editor' : 'edge-editor'
		cell.removeTool(name)
		cell.addTools({
			name,
			args: {
				event: e,
				attrs: {
					backgroundColor: isNode ? '#EFF4FF' : '#FFF',
				},
			},
		})
	})


	function changeHitory() {
		if (graph.isHistoryEnabled()) {
			graph.disableHistory()
		} else {
			graph.enableHistory()
		}
	}

	function loadJson()
	{
		$.getJSON(prefix+"/getJsonView",{id:wf_id,task_id:task_id},function(data){
			if(data)
			{
				graph.fromJSON(data);
			}
		});
	}
</script>

</body>
#end